<!--退宿查询-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
              ref="crud"
              :data="tableData"
              :option="tableOption"
              :page.sync="page"
              :table-loading="tableLoading"
              @search-reset="searchReset"
              @on-load="getList"
              @search-change="searchChange"
              @size-change="sizeChange"
              @current-change="currentChange">
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {historyOutObj} from '@/api/hostel/historyOut'
import {mapGetters} from 'vuex'
import {HOSTEL_OUT, HOSTEL_SEX} from '@/const/Hostel'
import {PERSON_DETAILS} from "@/const/personDict";


export default {
  name: 'historyOut',
  data() {
    return {
      tableData: [],
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
        tableLoading: false,
        // tableOption: tableOption,
        tableOption: {
          border: true,  //竖线边框
          index: true,  //表格序号
          indexLabel: '序号',  //序号的标题
          stripe: true,  //是否显示表格的斑马条纹
          menuAlign: 'center',  //菜单栏对齐方式
          menuWidth: 210,  //操作菜单栏的宽度
          align: 'center',  //表格列对其方式
          emptyBtnText: '重置', //清空按钮文案
          searchMenuSpan: 6,  //搜索框长度
          // searchSpan: 5,
          addBtn: false,  //添加按钮
          delBtn: true,  //行内删除按钮
          editBtn: false,  //行内编辑按钮
          viewBtn: false,  //是否显示查看按钮
          selection: false,  //表格是否显示可选
          excelBtn: false,  //表格导出按钮是否显示
          refreshBtn: false,  //表格上面小的 刷新按钮
          columnBtn: false,  //表格上面小的 列表显隐按钮
          searchBtn: true,  //搜索按钮
          menu: false,   //是否显示操作栏
          props: {
            label: 'label',
            value: 'value'
          },
          column: [
            {
              label: '人员id',  //字段标题
              prop: 'outdormId',  //字段名称
              search: false,  //搜索是否显示
              hide: true,  //展示页面是否显示
            },
            {
              label: '姓名',
              prop: 'name',
              search: true,
              dicData: HOSTEL_OUT,  //引入字典
            }, {
              label: '学号',
              prop: 'number',
              dicData: HOSTEL_OUT,
            }, {
              label: '性别',
              prop: 'sex',
              search: true,
              type: 'select',  //搜索框显示类型
              dicData: HOSTEL_SEX,
              change: (value) => {
                this.searchForm.sex = value.value
                this.getList(this.page, this.searchForm)
              },
            },{
              label: '校区',
              prop: 'campusDeptArea',
              dicData: PERSON_DETAILS,
              editDisplay: false,
            },
            {
              label: '年级',
              prop: 'grade',
              dicData: HOSTEL_OUT,
            },{
              label: '年级',
              prop: 'deptId',
              type: 'select',
              search:true,
              hide: true,
              props: {
                label: 'name',
                value: 'id'
              },
              // searchClearable: false,
              cascaderItem: ['className'],
              dicUrl: '/admin/dept/PermissionTree',
              dicFormatter: (res) => {
                let gradeArr = res.data
                let value = []
                if(gradeArr.length> 0){
                  for(let i of gradeArr){
                    if(i.typeNum == "2" && i.isLock === false){
                      value.push(i)
                    }
                  }
                  console.log(value)
                  return value
                }
              },
              change: (value) => {
                this.searchForm.deptId = value.value
                this.getList(this.page, this.searchForm)
              },
            }, {
              label: '班级',
              prop: 'className',
              type: 'select',
              search:true,
              props: {
                label: 'name',
                value: 'deptId'
              },
              // searchClearable: false,
              row: true,
              /*cascaderIndex:0,*/
              dicUrl: '/campus/sysdept/detpTree/{{key}}/1,2,3',
              dicFormatter: (res) => {
                // console.log(res.data[0].children)
                return res.data[0].children;//返回字典的层级结构
              },
              change: (value) => {
                this.searchForm.deptId = value.value
                this.getList(this.page, this.searchForm)
              },
            },
            {
              label: '原楼栋',
              prop: 'building',
              search: true,
              type: 'select',
              // searchClearable: false,
              dicUrl: '/campus/building/selectAll',
              dicMethod: 'get',
              props: {
                label: 'buildingName',
                value: 'buildingName'
              },
              change: (value) => {
                if (value.value === '') {
                  return;
                }
                this.searchForm.building = value.value
                this.getList(this.page, this.searchForm)
              },
            }, {
              label: '原宿舍号',
              prop: 'dormNumber',
              search: true,
              dicData: HOSTEL_OUT,
            },
            {
              label: '退宿时间',
              prop: 'outdormDatetime',
              type: 'datetime',
              format: 'yyyy-MM-dd HH:mm', //显示值时间格式
              valueFormat: 'yyyy-MM-dd HH:mm:ss',  //真实值的时间格式
              viewDisplay: false,
              search: false,
              dicData: HOSTEL_OUT,
            },
            {
              label: '修改操作人',
              prop: 'operationUser',
              viewDisplay: false,
              search: false,
              dicData: HOSTEL_OUT,
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['permissions']),
    },
    methods: {

      //展示表格
      getList(page, params) {
        this.tableLoading = true
        historyOutObj(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          descs: 'create_time',  //是否倒序
        }, params, this.searchForm)).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },

      //搜索页面内容
      searchChange(form, done) {
        if (form.className !== undefined) {
          form.deptId = form.className
          // console.log(form.deptId)
          this.getList(this.page, form)
          done()
        }
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },

      //点击每页多少条会调size-change方法回调
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },

      //点击页码会调用current-change方法回调当前页
      currentChange(current) {
        this.page.currentPage = current
      },

      //清空时重置页面
      searchReset(){
        this.searchForm = {};
        this.getList(this.page)
      }
    }
  }
</script>
<style scoped>
/deep/ .avue-crud__menu {
  display: none;
}

/deep/ .el-form-item__label {
  text-align: left;
}

/deep/ .avue-form__row {
  padding-left: 2px !important;
  padding-right: 36px !important;
}

/deep/ .avue-form__menu--center {
  text-align: left;
}

/*/deep/.avue-form__menu--center .el-button{*/
/*  margin: 0 20px 0 0;*/
/*}*/
</style>
